<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #menu {
        /* 软件: snipaste 截图 屏幕标记 取色器 */
        background-color: rgb(0, 44, 105);
        color: white;
        user-select: none;
      }
      #menu > span {
        display: inline-block;
        width: 100px;
        padding: 5px 0;
        text-align: center;
      }
      #menu > span.cur {
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <span class="cur">首页</span>
      <span>关于净美仕</span>
      <span>公司动态</span>
      <span>产品中心</span>
      <span>联系我们</span>
    </div>

    <script>
      // 简化方式:
      // document.querySelectorAll()
      // 函数的this: 指向触发时所在对象, 所以上方的querySelectorAll 的this 是document
      // 如何指定函数的this: 用bind捆绑document才可以
      // 简化操作看情况: 后续多次使用 简化更合适
      const qsa = document.querySelectorAll.bind(document)
      const qs = document.querySelector.bind(document)
      // 推荐用const 代替 let , 因为更安全, 变量没有变更需求的场景
      const titles = qsa('#menu > span')

      titles.forEach(value => {
        value.onclick = function () {
          //删除之前高亮的
          qs('#menu .cur').classList.remove('cur')
          this.classList.add('cur')
        }
      })
    </script>
  </body>
</html>
